@charset "UTF-8";

$tooltip-theme: rgba($black, .92);  // 主题色

.#{$ns-obj}tooltip {
	position: relative;
	display: inline-block;
	outline: none !important;

	&:hover:before,
	&:hover:after {display: block;}

	&.#{$ns-is}show:before,
	&.#{$ns-is}show:after {display: block;}

	// 内容
	&:before {
		content: attr(data-tooltip);
		position: absolute;
		top: -($tooltip-cont-ht + $tooltip-arrow-size + $tooltip-space);
		left: 50%;
		z-index: 1;

		display: none;

		padding: 0 1em;
		transform: translate(-50%, 0);
		white-space: nowrap;
		line-height: $tooltip-cont-ht;

		font-size: 13px;
		color: $dark-white;
		background: $tooltip-theme;
		border-radius: 5px;
	}

	// 箭头
	&:after {
		content: "";
		position: absolute;
		top: -($tooltip-arrow-size + $tooltip-space);
		left: 50%;
		z-index: 1;

		display: none;

		transform: translate(-50%, 0);

		border: $tooltip-arrow-size solid transparent;
		border-top-color: $tooltip-theme;
	}
}

// 显示方位 mixin
@mixin tooltipPos($direc) {
	@if $direc == 'bottom' {
		&:before {
			top: auto;
			bottom: -($tooltip-cont-ht + $tooltip-arrow-size + $tooltip-space);
		}
		&:after {
			top: auto;
			bottom: -($tooltip-arrow-size + $tooltip-space);
			border-color: transparent;
			border-#{$direc}-color: $tooltip-theme;
		}
	} @else {
		&:before {
			top: 50%;
			#{$direc}: -($tooltip-arrow-size + $tooltip-space);
			@if $direc == 'right' {
				left: auto;
				transform: translate(100%, -50%);
			} @else {
				transform: translate(-100%, -50%);
			}
		}
		&:after {
			top: 50%;
			#{$direc}: -($tooltip-arrow-size + $tooltip-space);
			@if $direc == 'right' {
				left: auto;
			}
			transform: translate(0, -50%);
			border-color: transparent;
			border-#{$direc}-color: $tooltip-theme;
		}
	}
}

// 左侧显示
.tooltip-left {
	@include tooltipPos('left');
}

// 右侧显示
.tooltip-right {
	@include tooltipPos('right');
}

// 下方显示
.tooltip-bottom {
	@include tooltipPos('bottom');
}
